{% extends '::backend.html.twig' %}
{% block documentReadyJavascript %} 
   {# {{ parent() }} #}
    <script type="text/javascript" >
        $(function(){
            $('.date').datepicker({ dateFormat: 'dd/mm/yy' })
        })
         $(document).ready(function() { $("select").css('width','222').select2(); });
        
    </script>
    <script type="text/javascript" >

        $(function(){
            //tipoElem
            function preparePrototypeTo(){
                $('.date').datepicker({
                    dateFormat: 'dd/mm/yy'
                });

                //inicializo los elementos ya cargdos                                                                                                                             
                customizeViewAndAddRemoveButton($(".personas-cargada"));                                                                 
                $("#add-personas").on('click', function(e){
                    e.preventDefault();
                    var  $addCargo = $("#collection-of-personas");
                    var prototype = $addCargo.attr('data-prototype');
                    var cantElem = $("#personas-pre-cargadas").children().length + $("#apped-personas").children().length + 1
                    var newForm = prototype.replace(/\$\$name\$\$/g, cantElem);
                    var $appedPersonas=$('#apped-personas');
                    addFormTo($appedPersonas,newForm) ;                
                });
            } //fin preparePrototypeTo
            
            function addFormTo($elem, form){          
                var $form =  $($elem.prepend(form));            
                $($form.children()[0]).show('slow')
                $form.find('input.date').datepicker({
                    dateFormat: 'dd/mm/yy'
                })
                customizeViewAndAddRemoveButtonOnAdd($("#apped-personas" ).find('div.personas-agregada'));               
            }
            
        function customizeViewAndAddRemoveButtonOnAdd($elements){
            $elements.each( function(index,el){
                var $el  = $(this);   
                if(!$el.hasClass('have-remove')){    
                    $el.addClass('have-remove');                            
                    $el.find('.to-remove').on('click', function(e){
                        // prevent the link from creating a "#" on the URL
                        e.preventDefault();
                        if (confirm('Estas seguro?')) {
                            $el.hide('blind',{},600).remove();
                        };

                    });
                    $el.find('div input[class="date"]').addClass(tipoElem);               
                }
            });
        }


        function customizeViewAndAddRemoveButton($elements,tipo){
        console.log("$elements",$elements);

            $elements.each( function(index,el){
                var  $el=$(el); 
                $el.children().show();
                    $el.find('a.to-remove').on('click', function(e){
                        // prevent the link from creating a "#" on the URL
                        e.preventDefault();
                        if (confirm('Estas seguro?')) {
                            $el.hide('blind',{},600).remove();
                        };                                        
                    });                                                                          
                    $el.find('div input[class="date"]').addClass(tipo);               

            })

        }
        
        preparePrototypeTo();                               
    });
    </script>
{% endblock documentReadyJavascript %}
{% block contenido %}
             {% include 'BackendBundle:Default:flashAlerts.html.twig'%}

    <form class="form-horizontal"  action="{{ path('cargo_update', { 'id': entity.id }) }}" method="post" {{ form_enctype(form) }}>
        <fieldset>
            <div id="collection-of-personas" data-prototype="{% filter escape %}{% include 'BackendBundle:Cargo:prototypePersona.html.twig' with {'form': form.personas.get('prototype')} %}{% endfilter %}"></div>
            {{ form_widget(form._token) }}           
            <legend>Editar Cargo</legend>
             {% if errors|length > 0 %}
                <div class="alert alert-error">
                    {{ form_errors(form) }}
                </div>
            {% endif %}
            <div class="control-group">
                <label class="control-label required">Cátedra</label>
                    {{ form_errors(form.catedra) }}
                    <div class="controls">
                    {{ form_widget(form.catedra) }}
                    </div>
            </div>                                     
            <div class="control-group">
                <label class="control-label required">Tipo de Cargo</label>
                    {{ form_errors(form.tipoDeCargo) }}
                    <div class="controls">
                    {{ form_widget(form.tipoDeCargo) }}
                    </div>
            </div>      
            <div class="control-group">
                <label class="control-label required">Tipo de Dedicación</label>
                   {# {{ form_errors(form.tipo_de_dedicacion) }} #}
                    <div class="controls">
                    {{ form_widget(form.tipo_de_dedicacion) }}
                    </div>
            </div>
            <div class="control-group">
                <label class="control-label required">Personas
                </label>
                <div>
                    <a href="#" style="margin-left: 20px; margin-bottom: 15px" class="btn btn-primary" id="add-personas"><i class="icon-plus icon-black"></i>Agregar Persona</a>
                    <div class=" controls">
                        <div id="apped-personas"></div> 
                        <div id="personas-pre-cargadas">
                            {% if form.personas is not null  %}
                                {% for persona in form.personas %}
                                    <div class="personas-cargada">
                                        {% include 'BackendBundle:Cargo:prototypePersona.html.twig' with {'form': persona} %}
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-success">
                    <i class="icon-ok icon-black"></i> Aceptar
                </button>
                <a class="btn btn-danger " href="{{ path('cargo') }}">
                    <i class="icon-remove icon-black"></i> Cancelar
                </a>
            </div>
        </fieldset>
    </form>
{% endblock %}
